<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :cmessage="message" v-bind:cmovies="movies"></cpn>
</div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <h3>{{cmessage}}</h3>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //父传子：props  子传父：$emit()
  const cpn = {
    template: '#cpn',
    // props: ['cmovies', 'cmessage'](写法一 很少用)
    props:{
      //1.类型限制
      //cmovies:Array
      // cmessage:String
      //2.提供默认值以及必传值
      cmessage:{
        type:String,
        default:'adafada',
        required:true//boolean型
      },
      //类型是对象或者数组时，默认值必须是一个函数
      cmovies:{
        type: Array,
        //default:[] 不推荐 版本已经不支持
        default(){
          return []
        }
      }
    }
  }

  const vm = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '航海王', '海尔兄弟', '金刚']
    },
    components: {
      cpn
    }
  })
</script>

</body>
</html>